<template>
    <div class="index">
        <div class="header"><span>物业数据平台</span></div>
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenLine1></screenLine1>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenLine2></screenLine2>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenLine3></screenLine3>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenLine4></screenLine4>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenPie></screenPie>
                </div>
            </el-col>
            <!-- <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col> -->
            <el-col :span="6" :offset="12">
                <div class="grid-content bg-purple-light">
                    <screenScatters></screenScatters>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenRadar></screenRadar>
                </div>
            </el-col>
            <!-- <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col> -->
            <el-col :span="6" :offset="12">
                <div class="grid-content bg-purple-light">
                    <screenScatters1></screenScatters1>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <screenLine></screenLine>
                </div>
            </el-col>
            <!-- <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col> -->
            <el-col :span="6" :offset="12">
                <div class="grid-content bg-purple-light">
                    <screenColumnar></screenColumnar>
                </div>
            </el-col>
        </el-row>
        <div class="map">
            <screenMap></screenMap>
        </div>
    </div>
</template>
<script>
import screenLine1 from "@/components/screenLine1.vue";
import screenLine2 from "@/components/screenLine2.vue";
import screenLine3 from "@/components/screenLine3.vue";
import screenLine4 from "@/components/screenLine4.vue";
import screenPie from "@/components/screenPie.vue";
import screenScatters from "@/components/screenScatters.vue";
import screenScatters1 from "@/components/screenScatters1.vue";
import screenRadar from "@/components/screenRadar.vue";
import screenLine from "@/components/screenLine.vue";
import screenColumnar from "@/components/screenColumnar.vue";
import screenMap from "@/components/screenMap/screenMap.vue";
export default {
    components: {
        screenLine1,
        screenLine2,
        screenLine3,
        screenLine4,
        screenPie,
        screenScatters,
        screenScatters1,
        screenRadar,
        screenLine,
        screenColumnar,
        screenMap,
    },
    data() {
        return {};
    },
};
</script>
<style lang="scss" scoped>
.map {
    position: fixed;
    top: 28vh;
    // left: 382px;
    left: 50%;
    transform: translateX(-50.5%);
    // width: 754px;
    width: 49.5%;
    height: 70vh;
    background-color: aquamarine;
    border-radius: 5px;
}
.index {
    background: url("../assets/beijing.png");
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;

    .header {
        height: 3.5vh;
        color: #fff;
    }

    .box {
        height: calc(100% - 45px);
    }
}

::v-deep .el-row {
    margin-left: 0;
    margin-right: 0;
}

.el-row {
    margin-bottom: 10px;
    // display: flex;
    // width: 100vw;
    // width: 100%;
    // height: 30%;
    width: 100%;
    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    // flex: 1;
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    // min-height: 36px;
    height: 23vh;
    // background-color: rgba(0, 0, 0, 0.2);
    background-color: pink;
}

// .row-bg {
//     padding: 10px 0;
//     background-color: #f9fafc;
// }
</style>